<template>
  <div class="custom-layout" :style="{ height: containerMinHeight}" id="table-full-screen">
    <el-row :gutter="20">
      <el-col :md="24" :lg="4">
        <Tree ref="materialCategoryTree" @node-click="handleNodeClick"/>
      </el-col>
      <el-col :md="24" :lg="20" class="no-margin-bottom">
		<div class="card art-custom-card" :style="{ height: containerMinHeight}" style="border: 0px !important;">
		  	<div class="card-header" style="display: flex;justify-content: space-between;align-items: center;border: 1px solid var(--art-card-border);border-bottom: 0px;">
			  <div>
				  <i class="iconfont-sys">&#xe60d;</i>
				  <span style="margin-left: 5px;">素材资源</span>
			  </div>
		  	</div>
		  	<div style="height: calc(100% - 52px);overflow-y: hidden;padding:0px;">
		  		<el-tabs type="border-card" style="height: calc(100% - 2px);">
		  			<el-tab-pane label="目录">
		  				<Folder :data="category" @refresh-tree="handleRefreshTree"></Folder>
		  			</el-tab-pane>
		  			<el-tab-pane label="素材" v-if="category?.type=='material'">
						<Table :data="category" ></Table>
		  			</el-tab-pane>
		  		</el-tabs> 
		  	</div>
		</div>
      </el-col>
    </el-row> 
  </div>
</template>

<script setup lang="ts">
  import Tree from './widget/Tree.vue'
  import Folder from './widget/Folder.vue'
  import Table from './widget/Table.vue'
  import { useCommon } from '@/composables/useCommon'
  const { containerMinHeight } = useCommon()
  defineOptions({ name: 'MaterialManage' })
  
  const materialCategoryTree=ref<any>();
  const category=ref<any>();
  
  const handleNodeClick=(data:any)=>{
	category.value=data
  }
  
  const handleRefreshTree=(data:any)=>{
	  if(materialCategoryTree.value){
		materialCategoryTree.value?.refresh(data)
	  }
  }
  
</script>

<style lang="scss" scoped>
  @use './style';
</style>
